<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Transitions — Chapter 6 — Magic of CSS — Adam Schwartz</title>

        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

        <link rel="icon" href="/magic-of-css/favicon.ico">

        <link rel="stylesheet" href="../../css/base.css">
        <link rel="stylesheet" href="../../css/logo.css">
        <link rel="stylesheet" href="../../css/chapter.css">

        <script src="../../js/chapters.js"></script>
    </head>
    <body>
        <div class="page">
            <a class="logo" href="/../.."><h1 class="the-magic-of">The Magic of CSS</h1><div class="css-rainbow"><div class="css-letter css-rainbow-c"><div class="rainbow"><div class="bands"></div></div></div><div class="css-letter css-rainbow-s css-rainbow-s-1"><div class="top-half"><div class="rainbow"><div class="bands"></div></div></div><div class="bottom-half"><div class="rainbow"><div class="bands"></div></div></div></div><div class="css-letter css-rainbow-s css-rainbow-s-2"><div class="top-half"><div class="rainbow"><div class="bands"></div></div></div><div class="bottom-half"><div class="rainbow"><div class="bands"></div></div></div></div></div></a>

            <div class="chapter">
                <h1>
                    <span class="number">Chapter 6</span>
                    <span class="title">Transitions</span>
                </h1>

                <h3>“All you need to know about CSS Transitions”</h3>

                <p>Before reading this chapter, please read <a href="https://blog.alexmaccaw.com/all-you-need-to-know-about-css-transitions/">All you need to know about CSS Transitions</a> by Alex MacCaw. This is a fantastic resource and covers much of what we’d like to cover.</p>

                <hr>

                <h2>Transitions</h2>

                <p>CSS transitions are the ideal solution for transitioning a CSS property (or set of properties) from one value to another value along some easing path.</p>

                <p>Now, together, let’s combine this knowledge with what we’ve learned in the previous chapters on <a href="../4-color">Color</a> and <a href="../5-typography">Typography</a>.</p>

                <style>
                    .typography-example {
                        line-height: normal;
                        margin-bottom: 8rem
                    }

                    .typography-example {
                        position: relative
                    }

                    .typography-example,
                    .typography-example * {
                        cursor: default
                    }

                    .typography-example::before {
                        content: "Hover to see transition";
                        text-transform: uppercase;
                        position: absolute;
                        top: .625rem;
                        left: .625rem;
                        font-size: .625rem;
                        letter-spacing: .1em;
                        transition: opacity 200ms;
                        transition-delay: 2000ms
                    }

                    .typography-example:hover::before {
                        transition-delay: 0ms;
                        opacity: 0
                    }

                    /* Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=990340 */
                    @-moz-document url-prefix() {
                        .typography-example {
                            overflow: hidden
                        }
                    }
                </style>

                <h2>Examples</h2>

                <span><!-- prevent h2 + h3 selector from applying --></span>

                <h3>Example 1: Random individual letter fade</h3>

                <p>One extremely powerful tool at your disposal is <code>transition-delay</code>. Transition delays allow you to delay the start of when a transition occurs. In this first example, we set pseudo-random delays for the <code>opacity</code> transitions on each letter, creating a reveal effect that is both subtle and attractive.</p>

                <div class="example-wrapper typography-example-wrapper">
                    <style>
                        .typography-example-1 {
                            background-image: linear-gradient(135deg, #723362, #9d223c);
                            background-color: #9d223c;
                            color: #fff;
                            padding: 1em 0;
                            text-align: center;
                            font-weight: 300;
                            text-transform: uppercase;
                            letter-spacing: .4em;
                            padding-left: .4em;
                            font-size: 1.8em;
                            margin-top: 2.5rem
                        }

                        .typography-example-1 span {
                            opacity: 0;
                            transition: opacity 1300ms
                        }

                        .typography-example-1 span:nth-child(1)  { transition-delay:  200ms }
                        .typography-example-1 span:nth-child(2)  { transition-delay: 1200ms }
                        .typography-example-1 span:nth-child(3)  { transition-delay:  800ms }
                        .typography-example-1 span:nth-child(4)  { transition-delay:  300ms }
                        .typography-example-1 span:nth-child(5)  { transition-delay:  700ms }
                        .typography-example-1 span:nth-child(6)  { transition-delay:  600ms }
                        .typography-example-1 span:nth-child(7)  { transition-delay:  400ms }
                        .typography-example-1 span:nth-child(8)  { transition-delay:  900ms }
                        .typography-example-1 span:nth-child(9)  { transition-delay:  700ms }
                        .typography-example-1 span:nth-child(10) { transition-delay:   50ms }

                        .typography-example-1:hover span {
                            opacity: 1
                        }
                    </style>

                    <pre><code>.ex span {
    opacity: 0;
    transition: opacity 1300ms
}

.ex span:nth-child(1)  { transition-delay:  200ms }
.ex span:nth-child(2)  { transition-delay: 1200ms }
.ex span:nth-child(3)  { transition-delay:  800ms }
.ex span:nth-child(4)  { transition-delay:  300ms }
.ex span:nth-child(5)  { transition-delay:  700ms }
.ex span:nth-child(6)  { transition-delay:  600ms }
.ex span:nth-child(7)  { transition-delay:  400ms }
.ex span:nth-child(8)  { transition-delay:  900ms }
.ex span:nth-child(9)  { transition-delay:  700ms }
.ex span:nth-child(10) { transition-delay:   50ms }

.ex:hover span {
    opacity: 1
}</code></pre>

                    <div class="example typography-example typography-example-1">
                        <span>E</span><span>x</span><span>a</span><span>m</span><span>p</span><span>l</span><span>e</span> <span>O</span><span>n</span><span>e</span>
                    </div>
                </div>

                <h3>Example 2: Multiple transitions and delays</h3>

                <p>CSS transitions really shine when they’re combined. In this example, we specify two transitions, one for <code>-webkit-transform</code> and one for <code>opacity</code>. They are written as part of the same <code>transition</code> declaration, separated with commas.</p>

                <pre><code>.ex .title span,
.ex .author span {
    /* ... */
    transition: -webkit-transform 800ms, opacity 800ms
}</code></pre>

                <p>Since we specified two transitions, we also must specify two transition delays. They are written similarly.</p>

                <pre><code>.ex .title span:nth-child(1) { transition-delay: 360ms, 300ms }
.ex .title span:nth-child(2) { transition-delay: 420ms, 300ms }
.ex .title span:nth-child(3) { transition-delay: 480ms, 300ms }
/* ... */
</code></pre>

                <p>Together, these transitions and their delays allow us to create a beautiful wave effect with the letters in this example.</p>

                <div class="example-wrapper typography-example-wrapper">
                    <style>
                        .typography-example-2 {
                            background: #fff;
                            border: .5em solid #000;
                            color: #000;
                            padding: 1em 0;
                            text-align: center;
                            font-weight: 700;
                            text-transform: uppercase;
                            font-size: 1.5em
                        }

                        .typography-example-2 .title {
                            display: block;
                            letter-spacing: .4em;
                            padding-left: .4em
                        }

                        .typography-example-2 .author {
                            font-style: italic;
                            font-weight: 300;
                            color: #888;
                            font-size: .7em;
                            text-transform: none;
                            letter-spacing: .12em;
                            padding-left: .12em
                        }

                        .typography-example-2 {
                            overflow: hidden
                        }

                        .typography-example-2 .title span,
                        .typography-example-2 .author span {
                            display: inline-block;
                            opacity: 0;
                            transition: -webkit-transform 800ms, opacity 800ms
                        }

                        .typography-example-2 .title span {
                            -webkit-transform: translateZ(0) translateY(-6rem)
                        }

                        .typography-example-2 .author span {
                            -webkit-transform: translateZ(0) translateY(6rem)
                        }

                        .typography-example-2:hover .title span,
                        .typography-example-2:hover .author span {
                            opacity: 1;
                            transition: -webkit-transform 800ms, opacity 1200ms;
                            -webkit-transform: translateZ(0) translateY(0)
                        }

                        .typography-example-2 .title span:nth-child(1) { transition-delay: 360ms, 300ms }
                        .typography-example-2 .title span:nth-child(2) { transition-delay: 420ms, 300ms }
                        .typography-example-2 .title span:nth-child(3) { transition-delay: 480ms, 300ms }
                        .typography-example-2 .title span:nth-child(4) { transition-delay: 540ms, 300ms }
                        .typography-example-2 .title span:nth-child(5) { transition-delay: 600ms, 300ms }
                        .typography-example-2 .title span:nth-child(6) { transition-delay: 660ms, 300ms }
                        .typography-example-2 .title span:nth-child(7) { transition-delay: 720ms, 300ms }

                        .typography-example-2 .author span:nth-child(1)  { transition-delay: 420ms, 0ms }
                        .typography-example-2 .author span:nth-child(2)  { transition-delay: 390ms, 0ms }
                        .typography-example-2 .author span:nth-child(3)  { transition-delay: 360ms, 0ms }
                        .typography-example-2 .author span:nth-child(4)  { transition-delay: 330ms, 0ms }
                        .typography-example-2 .author span:nth-child(5)  { transition-delay: 300ms, 0ms }
                        .typography-example-2 .author span:nth-child(6)  { transition-delay: 270ms, 0ms }
                        .typography-example-2 .author span:nth-child(7)  { transition-delay: 240ms, 0ms }
                        .typography-example-2 .author span:nth-child(8)  { transition-delay: 210ms, 0ms }
                        .typography-example-2 .author span:nth-child(9)  { transition-delay: 180ms, 0ms }
                        .typography-example-2 .author span:nth-child(10) { transition-delay: 150ms, 0ms }
                        .typography-example-2 .author span:nth-child(11) { transition-delay: 120ms, 0ms }
                        .typography-example-2 .author span:nth-child(12) { transition-delay:  90ms, 0ms }
                        .typography-example-2 .author span:nth-child(13) { transition-delay:  60ms, 0ms }
                        .typography-example-2 .author span:nth-child(14) { transition-delay:  30ms, 0ms }

                        .typography-example-2:hover .title span,
                        .typography-example-2:hover .author span {
                            transition-delay: 0;
                        }

                        /* Firefox styles */

                        @-moz-document url-prefix() {
                            .typography-example-2 .title span,
                            .typography-example-2 .author span {
                                transition: -moz-transform 800ms, opacity 800ms
                            }

                            .typography-example-2 .title span {
                                -moz-transform: translateZ(0) translateY(-6rem)
                            }

                            .typography-example-2 .author span {
                                -moz-transform: translateZ(0) translateY(6rem)
                            }

                            .typography-example-2:hover .title span,
                            .typography-example-2:hover .author span {
                                transition: -moz-transform 800ms, opacity 1200ms;
                                -moz-transform: translateZ(0) translateY(0)
                            }
                        }
                    </style>

                    <pre><code>.ex .title span,
.ex .author span {
    display: inline-block;
    opacity: 0;
    transition: -webkit-transform 800ms, opacity 800ms
}

.ex .title span {
    -webkit-transform: translateZ(0) translateY(-6rem)
}

.ex .author span {
    -webkit-transform: translateZ(0) translateY(6rem)
}

.ex:hover .title span,
.ex:hover .author span {
    opacity: 1;
    transition: -webkit-transform 800ms, opacity 1200ms;
    -webkit-transform: translateZ(0) translateY(0)
}

.ex .title span:nth-child(1) { transition-delay: 360ms, 300ms }
.ex .title span:nth-child(2) { transition-delay: 420ms, 300ms }
.ex .title span:nth-child(3) { transition-delay: 480ms, 300ms }
.ex .title span:nth-child(4) { transition-delay: 540ms, 300ms }
.ex .title span:nth-child(5) { transition-delay: 600ms, 300ms }
.ex .title span:nth-child(6) { transition-delay: 660ms, 300ms }
.ex .title span:nth-child(7) { transition-delay: 720ms, 300ms }

.ex .author span:nth-child(1)  { transition-delay: 420ms, 0ms }
.ex .author span:nth-child(2)  { transition-delay: 390ms, 0ms }
.ex .author span:nth-child(3)  { transition-delay: 360ms, 0ms }
.ex .author span:nth-child(4)  { transition-delay: 330ms, 0ms }
.ex .author span:nth-child(5)  { transition-delay: 300ms, 0ms }
.ex .author span:nth-child(6)  { transition-delay: 270ms, 0ms }
.ex .author span:nth-child(7)  { transition-delay: 240ms, 0ms }
.ex .author span:nth-child(8)  { transition-delay: 210ms, 0ms }
.ex .author span:nth-child(9)  { transition-delay: 180ms, 0ms }
.ex .author span:nth-child(10) { transition-delay: 150ms, 0ms }
.ex .author span:nth-child(11) { transition-delay: 120ms, 0ms }
.ex .author span:nth-child(12) { transition-delay:  90ms, 0ms }
.ex .author span:nth-child(13) { transition-delay:  60ms, 0ms }
.ex .author span:nth-child(14) { transition-delay:  30ms, 0ms }

.ex:hover .title span,
.ex:hover .author span {
    transition-delay: 0
}</code></pre>

                    <div class="example typography-example typography-example-2">
                        <span class="title">
                            <span>E</span><span>x</span><span>a</span><span>m</span><span>p</span><span>l</span><span>e</span>
                        </span>
                        <span class="author">
                            <span>b</span><span>y</span> <span>A</span><span>d</span><span>a</span><span>m</span> <span>S</span><span>c</span><span>h</span><span>w</span><span>a</span><span>r</span><span>t</span><span>z</span>
                        </span>
                    </div>
                </div>

                <h3>Example 3D</h3>

                <p>And just in case you were wondering: transitions work on 3D transforms too.</p>

                <div class="example-wrapper typography-example-wrapper">
                    <style>
                        .typography-example-3 {
                            border: .2em solid #ff3283;
                            font-size: 3em;
                            text-align: center;
                            padding: .2em;
                            color: #fff
                        }

                        .typography-example-3 .letter {
                            display: inline-block;
                            width: 20%;
                            padding: .8125rem;
                            position: relative;
                            -webkit-perspective: 20rem
                        }

                        .typography-example-3 .letter::before {
                            content: "\00a0"
                        }

                        .typography-example-3 .front,
                        .typography-example-3 .back {
                            display: block;
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            line-height: 1.9;
                            -webkit-backface-visibility: hidden;
                            transition: -webkit-transform 800ms
                        }

                        .typography-example-3 .letter:nth-child(1) .front { background: #ff3283 }
                        .typography-example-3 .letter:nth-child(2) .front { background: #ff716a }
                        .typography-example-3 .letter:nth-child(3) .front { background: #8ebd14 }
                        .typography-example-3 .letter:nth-child(4) .front { background: #0085ae }
                        .typography-example-3 .letter:nth-child(5) .front { background: #6335e6 }

                        .typography-example-3 .back {
                            border: .5rem solid;
                            background: #fff;
                            color: #000;
                            -webkit-transform: translateZ(0) rotateY(-180deg);
                            line-height: 1.6
                        }

                        .typography-example-3 .letter:nth-child(1) .back { border-color: #ff3283 }
                        .typography-example-3 .letter:nth-child(2) .back { border-color: #ff716a }
                        .typography-example-3 .letter:nth-child(3) .back { border-color: #8ebd14; background: #8ebd14; color: #fff }
                        .typography-example-3 .letter:nth-child(4) .back { border-color: #0085ae; background: #0085ae; color: #fff }
                        .typography-example-3 .letter:nth-child(5) .back { border-color: #6335e6; background: #6335e6; color: #fff }

                        .typography-example-3:hover .back {
                            -webkit-transform: translateZ(0) rotateY(0deg)
                        }

                        .typography-example-3:hover .front {
                            -webkit-transform: translateZ(0) rotateY(180deg)
                        }

                        .typography-example-3 .letter:nth-child(1) span { transition-delay:  200ms }
                        .typography-example-3 .letter:nth-child(2) span { transition-delay:  400ms }
                        .typography-example-3 .letter:nth-child(3) span { transition-delay:  600ms }
                        .typography-example-3 .letter:nth-child(4) span { transition-delay:  800ms }
                        .typography-example-3 .letter:nth-child(5) span { transition-delay: 1000ms }

                        .typography-example-3::before {
                            background: #ff3283;
                            z-index: 1
                        }

                        /* Firefox styles */

                        @-moz-document url-prefix() {
                            .typography-example-3 .letter {
                                -moz-perspective: 20rem
                            }

                            .typography-example-3 .front,
                            .typography-example-3 .back {
                                -moz-backface-visibility: hidden;
                                transition: -moz-transform 800ms
                            }

                            .typography-example-3 .back {
                                -moz-transform: translateZ(0) rotateY(-180deg)
                            }

                            .typography-example-3:hover .back {
                                -moz-transform: translateZ(0) rotateY(0deg)
                            }

                            .typography-example-3:hover .front {
                                -moz-transform: translateZ(0) rotateY(180deg)
                            }
                        }
                    </style>

                    <pre><code>.ex .letter {
    -webkit-perspective: 20rem
}

.ex .front,
.ex .back {
    -webkit-backface-visibility: hidden;
    transition: -webkit-transform 800ms
}

.ex .back {
    -webkit-transform: translateZ(0) rotateY(-180deg)
}

.ex:hover .back {
    -webkit-transform: translateZ(0) rotateY(0deg)
}

.ex:hover .front {
    -webkit-transform: translateZ(0) rotateY(180deg)
}

.ex .letter:nth-child(1) span { transition-delay:  200ms }
.ex .letter:nth-child(2) span { transition-delay:  400ms }
.ex .letter:nth-child(3) span { transition-delay:  600ms }
.ex .letter:nth-child(4) span { transition-delay:  800ms }
.ex .letter:nth-child(5) span { transition-delay: 1000ms }</code></pre>

                    <div class="example typography-example typography-example-3">
                        <span class="letter">
                            <span class="back">o</span>
                            <span class="front">M</span>
                        </span><!--
                     --><span class="letter">
                            <span class="back">f</span>
                            <span class="front">A</span>
                        </span><!--
                     --><span class="letter">
                            <span class="back">C</span>
                            <span class="front">G</span>
                        </span><!--
                     --><span class="letter">
                            <span class="back">S</span>
                            <span class="front">I</span>
                        </span><!--
                     --><span class="letter">
                            <span class="back">S</span>
                            <span class="front">C</span>
                        </span>
                    </div>
                </div>

                <p>Of course, this is just the tip of the iceberg. Colors, gradients, sizes, positions, orientations, etc., can all be transitioned simultaneously. In addition you have delays and custom easing functions right at your fingertips. CSS transitions are so easy to work with. Trust that the browser will do the right thing when you transition a CSS property, because it usually does.</p>

                <h3 class="magic">Radio button accordion</h3>

                <p>Combining HTML state with CSS transitions can make for rich interactions. Here we use the <code>:checked</code> pseudo-selector on radio buttons to style elements which follow them. This technique is often referred to as “<a href="https://www.google.com/search?q=%22checkbox+hack%22">The Checkbox Hack</a>”, but it could work with just about any element which can hold state via some pseudo-selector (<code>:checked</code>, <code>:focus</code>, etc.).</p>

                <p>There’s a lot of subtlety in this example, but the main idea is this: each accordion baffle has a <code>label</code> whose <code>for</code> attribute matches the <code>id</code> of a radio button. So, three baffles, three radio buttons. These radio buttons are placed in the document just before the baffle contents, so that we can use the adjacent selector <code>&nbsp;+&nbsp;</code> to style differently baffles which appear after <code>:checked</code> radios.</p>

                <pre><code>.accordion .baffle {
    height: 0
}

.accordion input[type="radio"]:checked + .baffle {
    height: 10em
}</code></pre>

                <p>Clicking the baffle label checks the radio button (and unchecks whichever radio button was previously checked) triggering the opening/closing of the appropriate baffle.</p>

                <p>And voilà. An accordion with only HTML and CSS.</p>

                <style>
                    .accordion-example .accordion input[type="radio"] {
                        position: absolute;
                        left: -9999rem;
                    }

                    .accordion-example .accordion label {
                        display: block;
                        background: #4f6f8b;
                        color: #fff;
                        text-align: center;
                        padding: 1rem;
                        font-size: .8em;
                        letter-spacing: .13em;
                        padding-left: .13em;
                        padding-right: 0;
                        text-transform: uppercase;
                        cursor: pointer;
                        height: 3.3rem;
                        font-weight: 300;
                        transition: background 400ms, color 400ms, border-radius 400ms;
                    }

                    .accordion-example .accordion label:hover {
                        background: #385670
                    }

                    .accordion-example .accordion .baffle {
                        position: relative;
                        height: 3.3rem;
                        overflow: hidden;
                        transition: height 400ms;
                        -webkit-transform: translateZ(0);
                    }

                    .accordion-example .accordion .baffle-inner {
                        padding: 1.25rem;
                        background: #eee;
                        position: absolute;
                        top: 3.3rem;
                        left: 0;
                        height: 13.5rem;
                        -webkit-overflow-scrolling: touch;
                        overflow: scroll;
                        overflow-y: scroll;
                        overflow-x: hidden
                    }

                    .accordion-example .accordion .baffle:first-of-type label {
                        border-radius: .25rem .25rem 0 0
                    }

                    .accordion-example .accordion .baffle:last-of-type label,
                    .accordion-example .accordion .baffle:last-of-type .baffle-inner {
                        border-radius: 0 0 .25rem .25rem
                    }

                    .accordion-example .accordion .baffle-inner :first-child {
                        margin-top: 0
                    }

                    .accordion-example .accordion .baffle-inner :last-child {
                        margin-bottom: 0
                    }

                    .accordion-example .accordion input[type="radio"]:checked + .baffle {
                        height: 16.8rem
                    }

                    .accordion-example .accordion input[type="radio"]:checked + .baffle label {
                        background: #eee;
                        color: inherit;
                        box-shadow: inset 0 -1px rgba(0, 0, 0, .15);
                        font-weight: 300
                    }

                    .accordion-example .accordion input[type="radio"]:checked + .baffle:not(:first-of-type) label {
                        border-radius: 0
                    }

                    .accordion-example .accordion input[type="radio"]:not(:checked) + .baffle + input[type="radio"]:not(:checked) + .baffle label {
                        box-shadow: inset 0 1px rgba(0, 0, 0, .15);
                    }

                    .accordion-example ::-webkit-scrollbar {
                        width: .9375rem
                    }

                    .accordion-example ::-webkit-scrollbar-thumb {
                        background: #849cb1;
                        border: solid #eee;
                        border-width: .375rem .375rem .375rem 0;
                        border-radius: 0 .375rem .375rem 0
                    }

                    .accordion-example ::-webkit-scrollbar-thumb:window-inactive {
                        background: #aaa
                    }
                </style>

                <div class="accordion-example">
                    <div class="accordion">
                        <input type="radio" id="radio-option-1" name="accordion-radios" checked>
                        <div class="baffle">
                            <label for="radio-option-1">Accordion</label>
                            <div class="baffle-inner">
                                Accordions (from 19th century German Akkordion, from Akkord - “musical chord, concord of sounds”) are a family of box-shaped musical instruments of the bellows-driven free-reed aerophone type, colloquially referred to as a squeezebox. A person who plays the accordion is called an accordionist. The concertina and bandoneón are related; the harmonium and American reed organ are in the same family.
                            </div>
                        </div>
                        <input type="radio" id="radio-option-2" name="accordion-radios">
                        <div class="baffle">
                            <label for="radio-option-2">Construction</label>
                            <div class="baffle-inner">
                                <p>Accordions have many configurations and types. What may be technically possible to do with one accordion could be impossible with another:</p>
                                <ul>
                                    <li>Some accordions are bisonoric, producing different pitches depending on the direction of bellows movement</li>
                                    <li>Others are unisonoric and produce the same pitch in both directions</li>
                                    <li>Some use a chromatic buttonboard for the right-hand manual</li>
                                    <li>Others use a diatonic buttonboard for the right-hand manual</li>
                                    <li>Yet others use a piano-style musical keyboard for the right-hand manual</li>
                                    <li>Some can play in different registers</li>
                                    <li>Craftsmen and technicians may tune the same registers differently, “personalizing” the end result, such as an organ technician might voice a particular instrument</li>
                                </ul>
                            </div>
                        </div>
                        <input type="radio" id="radio-option-3" name="accordion-radios">
                        <div class="baffle">
                            <label for="radio-option-3">History</label>
                            <div class="baffle-inner">
                                <p>The accordion is a free reed instrument and is in the same family as other instruments such as the sheng and khaen. The sheng and khaen are both much older than the accordion and this type of reed did inspire the kind of free reeds in use in the accordion as we know it today.</p>
                                <p>The accordion’s basic form is believed to have been invented in Berlin in 1822 by Christian Friedrich Ludwig Buschmann, although one instrument has been recently discovered that appears to have been built earlier.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <h3>Transition Inspiration</h3>

                <p>If you’re looking for more inspiration on what is possible with CSS transitions, check out these amazing demos from Codrops:</p>

                <ul>
                    <li><a href="http://tympanus.net/Development/SidebarTransitions">Sidebar Transitions</a></li>
                    <li><a href="http://tympanus.net/Development/PageTransitions">Page Transitions</a></li>
                    <li><a href="http://tympanus.net/Development/HeaderEffects">Header Effects</a></li>
                    <li><a href="http://tympanus.net/Development/CreativeLinkEffects">Creative Link Effects</a></li>
                    <li><a href="http://tympanus.net/Development/StackEffects">Simple Stack Effects</a></li>
                    <li><a href="http://tympanus.net/Development/ThumbnailGridAnimations">Animations for Thumbnail Grids</a></li>
                    <li><a href="http://tympanus.net/Development/GridLoadingEffects">Loading Effects for Grid Items</a></li>
                </ul>

                <h3>jQuery.Transit</h3>

                <p>For those of you who like a little JS to spice up your CSS, check out <a href="https://github.com/rstacruz">rstacruz</a>’s <a href="https://github.com/rstacruz/jquery.transit">jquery.transit</a>. For simple, static transitions (<em>oxymoron?</em>), it’s overkill. But you may find it really useful if you’re doing transitions which have dynamic or user-generated CSS property values.</p>

                <h3>Further reading</h3>

                <ul>
                    <li><a href="http://caniuse.com/css-transitions">Can I Use: CSS Transitions</a></li>
                    <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">MDN: Using CSS transitions</a></li>
                </ul>

                <!-- TODO -->

                <!--

                <h3>Citations</h3>

                <ol>
                    <li><a id="cite-1" href=""></a></li>
                </ol>

                -->

                <hr>

                <nav class="chapter-navigation">
                    <a class="previous-chapter" href="../5-typography">
                        <span class="number">5</span>
                        <span class="title">Typography</span>
                    </a>
                </nav>
            </div>
        </div>

        <script src="../../js/footer.js"></script>
    </body>
</html>
